<template>
  <n-layout-sider :width="300">
    <div style="padding:10px;">
      <n-tabs justify-content="space-around" type="line">
        <n-tab-pane name="widget-attr" tab="组件属性">
          <field-attrib
            v-if="
              $store.state.fields.findIndex((row) => row.selected == true) >= 0
            "
            v-model:data="
              $store.state.fields[
                $store.state.fields.findIndex((row) => row.selected == true)
              ]
            "
          />
          <div v-else>请选择组件</div>
        </n-tab-pane>
        <n-tab-pane name="form-attr" tab="表单属性">
          <form-attrib @colUpdate="colUpdate" />
        </n-tab-pane>
      </n-tabs>
    </div>
  </n-layout-sider>
</template>

<script>
import { ref } from "vue";
import FieldAttrib from "./right/FieldAttrib.vue";
import FormAttrib from "./right/FormAttrib.vue";
export default {
  components: { FormAttrib, FieldAttrib },
  setup() {
    const form = ref({ col: 1 });
    const colUpdate = (value) => {
      console.log(value);
    };
    return {
      form,
      colUpdate,
    };
  },
};
</script>
